<template>
  <el-input
    v-if="type === ControlType.input.value"
    v-model="inputVal"
    v-bind="controlSet"
    :readonly="isReadonly"
    :disabled="isDisabled"
    @change="change"
  />
  <component
    :is="'cont_' + control.Key"
    v-else-if="type === ControlType.customize.value"
    ref="auditForm"
    v-model="inputVal"
    v-bind="controlSet"
    :readonly="isReadonly"
    :disabled="isDisabled"
    :source="source"
    @change="change"
  />
  <el-input-number
    v-else-if="type === ControlType.number.value && isReadonly== false"
    v-model="inputVal"
    v-bind="controlSet"
    :disabled="isDisabled"
    @change="change"
  />
  <el-input
    v-else-if="type === ControlType.number.value && isReadonly"
    v-model="inputVal"
    v-bind="controlSet"
    :readonly="isReadonly"
    :disabled="isDisabled"
    @change="change"
  />
  <el-input
    v-else-if="type === ControlType.text.value"
    v-model="inputVal"
    type="textarea"
    v-bind="controlSet"
    :maxlength="controlSet.maxlength"
    :autosize="{ minRows: 4 }"
    show-word-limit
    :readonly="isReadonly"
    :disabled="isDisabled"
    @change="change"
  />
  <span v-else-if="type === ControlType.label.value" :key="inputVal">{{
    inputVal
  }}</span>
  <el-date-picker
    v-else-if="type === ControlType.date.value"
    v-model="inputVal"
    type="date"
    v-bind="controlSet"
    :readonly="isReadonly"
    :disabled="isDisabled"
    @change="change"
  />
  <el-date-picker
    v-else-if="type === ControlType.dateTime.value"
    v-model="inputVal"
    type="datetime"
    v-bind="controlSet"
    :readonly="isReadonly"
    :disabled="isDisabled"
    @change="change"
  />
  <el-time-select
    v-else-if="type === ControlType.time.value"
    v-model="inputVal"
    v-bind="controlSet"
    :readonly="isReadonly"
    :disabled="isDisabled"
    @change="change"
  />
  <el-switch
    v-else-if="type === ControlType.switch.value"
    v-model="inputVal"
    v-bind="controlSet"
    :disabled="isReadonly || isDisabled"
    @change="change"
  />
  <empInput
    v-else-if="type === ControlType.emp.value"
    v-model="inputVal"
    v-bind="controlSet"
    :company-id="compId"
    :dept-id="deptId"
    :unit-id="unitId"
    :readonly="isReadonly"
    :disabled="isDisabled"
    @change="changeExtend"
  />
  <deptSelect
    v-else-if="type === ControlType.dept.value"
    v-model="inputVal"
    v-bind="controlSet"
    :company-id="compId"
    :readonly="isReadonly"
    :disabled="isDisabled"
    @change="changeExtend"
  />
  <fileUpBtn
    v-else-if="type === ControlType.upload.value && controlSet['fileKey'] != null"
    v-model="fileId"
    v-bind="controlSet"
    :link-biz-pk="linkBizPk"
    :tag="rowId"
    :readonly="isReadonly"
    :disabled="isDisabled"
    @change="fileChange"
  />
  <companySelect
    v-else-if="type === ControlType.company.value"
    v-model="inputVal"
    v-bind="controlSet"
    :readonly="isReadonly"
    :disabled="isDisabled"
    @change="changeExtend"
  />
  <el-checkbox-group v-else-if="type === ControlType.checkbox.value" v-model="inputVal" :disabled="isReadonly || isDisabled" v-bind="controlSet" @change="change">
    <template v-if="controlSet.isButton">
      <el-checkbox-button v-for="(item, index) in itemList" :key="index" :label="item.value">{{ item.text }}</el-checkbox-button>
    </template>
    <template v-else>
      <el-checkbox v-for="(item, index) in itemList" :key="index" :label="item.value">{{ item.text }}</el-checkbox>
    </template>
  </el-checkbox-group>
  <el-radio-group v-else-if="type === ControlType.radio.value" v-model="inputVal" :disabled="isReadonly || isDisabled" @change="change">
    <template v-if="controlSet.isButton">
      <el-radio-button v-for="(item, index) in itemList" :key="index" :label="item.value">{{ item.text }}</el-radio-button>
    </template>
    <template v-else>
      <el-radio v-for="(item, index) in itemList" :key="index" :label="item.value">{{ item.text }}</el-radio>
    </template>
  </el-radio-group>
  <el-select v-else-if="type === ControlType.select.value" v-model="inputVal" :disabled="isReadonly || isDisabled" v-bind="controlSet" @change="change">
    <el-option v-for="(item, index) in itemList" :key="index" :label="item.text" :value="item.value" />
  </el-select>
  <input v-else-if="type === ControlType.hidden.value" type="hidden" :value="inputVal">
</template>

<script>
import Vue from 'vue'
import { ControlType, noLabelType } from '@/customForm/config/formConfig'
import empInput from '@/components/emp/empInput.vue'
import deptSelect from '@/components/unit/deptSelect.vue'
import companySelect from '@/components/company/companySelect.vue'
import fileUpBtn from '@/components/fileUp/FileUpBtn.vue'
import moment from 'moment'
export default {
  components: {
    empInput,
    deptSelect,
    companySelect,
    fileUpBtn
  },
  props: {
    linkBizPk: {
      type: String,
      default: null
    },
    isDefValue: {
      type: Boolean,
      default: false
    },
    rowId: {
      type: Number,
      default: null
    },
    colId: {
      type: String,
      default: null
    },
    table: {
      type: Object,
      default: null
    },
    control: {
      type: Object,
      default: null
    },
    readonly: {
      type: Boolean,
      default: false
    },
    source: {
      type: Object,
      default: null
    },
    rows: {
      type: Array,
      default: null
    },
    isWatch: {
      type: Boolean,
      default: false
    },
    state: {
      type: Number,
      default: 0
    },
    value: {
      default: null
    }
  },
  data() {
    return {
      ControlType,
      type: 0,
      inputVal: null,
      controlSet: {},
      itemList: [],
      isInit: false,
      compId: null,
      fileId: null,
      deptId: null,
      unitId: null,
      isReadonly: false,
      isDisabled: false
    }
  },
  computed: {
    comName() {
      const comId = this.$store.getters.curComId
      return this.$store.getters.company[comId]
    },
    comId() {
      return this.$store.getters.curComId
    },
    user() {
      return this.$store.getters.user
    }
  },
  watch: {
    control: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    },
    value: {
      handler(val) {
        this.inputVal = val
      },
      immediate: false
    },
    sate: {
      handler(val) {
        this.resetState()
      },
      immediate: false
    },
    readonly: {
      handler(val) {
        if (val !== this.isReadonly) {
          this.resetState()
        }
      },
      immediate: false
    }
  },
  mounted() {},
  methods: {
    change(e) {
      this.$emit('input', this.inputVal)
      this.$emit('update:isDefValue', false)
      this.controlChange(this.inputVal, 'set')
    },
    controlChange(vals, op) {
      if (this.isWatch) {
        this.$emit('change', {
          op: op,
          value: vals,
          row: this.source,
          tableId: this.table.Id,
          name: this.control.Name,
          rowId: this.rowId,
          colId: this.colId
        })
      }
    },
    fileChange(e) {
      this.$emit('input', this.fileId)
      this.$emit('update:isDefValue', false)
      this.controlChange(this.fileId, 'set')
    },
    changeExtend() {
      this.$emit('input', this.inputVal)
      this.$emit('update:isDefValue', false)
      this.controlChange(this.inputVal, 'set')
    },
    resetState() {
      if (this.state === 2) {
        this.isReadonly = true
        this.isDisabled = false
      } else if (this.state === 2) {
        this.isReadonly = true
        this.isDisabled = false
      } else {
        this.isReadonly = this.readonly
        this.isDisabled = false
      }
    },
    reset() {
      if (this.isInit) {
        return
      }
      this.isInit = true
      this.resetState()
      const set =
            this.control.ControlSet != null ? this.control.ControlSet : {}
      delete set.showwordlimit
      set.placeholder = this.control.Description
      this.initControlSet(set)
      if (this.control.ColType === ControlType.dateTime.value) {
        if (set.dateFormat == null) {
          set.dateFormat = 'yyyy-MM-dd'
        }
        if (set.timeFormat == null) {
          set.timeFormat = 'HH:mm:ss'
        }
        set.format = set.dateFormat + ' ' + set.timeFormat
        set['value-format'] = 'yyyy-MM-dd HH:mm:ss'
        delete set.dateFormat
        delete set.timeFormat
      } else if (this.control.ColType === ControlType.date.value) {
        set['value-format'] = 'yyyy-MM-dd'
      } else if (
        this.control.ColType === ControlType.dept.value &&
            set.BindComId !== null
      ) {
        this.initDept(set)
      } else if (
        this.control.ColType === ControlType.emp.value
      ) {
        this.initEmp(set)
      } else if (
        this.control.ColType === ControlType.checkbox.value ||
            this.control.ColType === ControlType.radio.value ||
            this.control.ColType === ControlType.select.value
      ) {
        this.itemList = set.items
      } else if (this.control.ColType === ControlType.customize.value) {
        this.initControl()
      }
      if (this.value == null || this.value === '') {
        this.inputVal = this.getDefVal()
      } else {
        this.inputVal = this.value
      }
      this.controlSet = set
      if (this.control.IsLabel && this.readonly) {
        this.initShow()
      } else {
        this.type = this.control.ColType
      }
      if (!this.readonly) {
        this.$emit('input', this.inputVal)
        this.$emit('update:isDefValue', true)
      }
    },
    initControl() {
      const key = 'cont_' + this.control.Key
      const that = this
      Vue.component(key, function(resolve, reject) {
        require(['@/' + that.control.EditControl + '.vue'], resolve)
      })
    },
    initShow() {
      if (noLabelType.includes(this.control.ColType)) {
        this.type = this.control.ColType
        return
      } else if (this.inputVal != null && this.inputVal !== '') {
        if (this.control.ColType === ControlType.date.value) {
          this.inputVal = moment(this.inputVal).format('YYYY-MM-DD')
        } else if (this.control.ColType === ControlType.dateTime.value) {
          this.inputVal = moment(this.inputVal).format('YYYY-MM-DD HH:mm')
        } else if (this.control.ColType === ControlType.switch.value) {
          if (this.inputVal) {
            this.inputVal = this.controlSet['active-text'] == null || this.controlSet['active-text'] === '' ? '是' : this.controlSet['active-text']
          } else {
            this.inputVal = this.controlSet['inactive-text'] == null || this.controlSet['inactive-text'] === '' ? '否' : this.controlSet['inactive-text']
          }
        } else if (this.control.ColType === ControlType.checkbox.value || this.control.ColType === ControlType.select.value) {
          if (Array.isArray(this.inputVal)) {
            this.inputVal = this.inputVal.map(a => {
              const item = this.itemList.find(c => c.value === a)
              return item.text
            }).join(',')
          } else {
            const item = this.itemList.find(c => c.value === this.inputVal)
            this.inputVal = item.text
          }
        } else if (this.control.ColType === ControlType.radio.value) {
          const item = this.itemList.find(c => c.value === this.inputVal)
          this.inputVal = item.text
        }
      }
      this.type = ControlType.label.value
    },
    initEmp(set) {
      if (set['limitType'] === '' || set['limitType'] == null) {
        this.compId = this.comId
        this.deptId = null
        this.unitId = null
      } else {
        this.compId = set['limitComId']
        this.deptId = set['limitDeptId']
        this.unitId = set['limitUnitId']
      }
    },
    initControlSet(set) {
      if (this.control.ColType === ControlType.number.value) {
        if (set.max === set.min) {
          delete set.max
          delete set.min
        } else if (set.max < set.min) {
          delete set.max
        }
      } else if (this.control.ColType === ControlType.checkbox.value) {
        if (set.max === set.min) {
          delete set.max
          delete set.min
        }
      } else if (this.control.ColType === ControlType.input.value || this.control.ColType === ControlType.text.value) {
        if (set.maxlength === 0) {
          delete set.maxlength
        }
      }
    },
    initDept(set) {
      if (this.source[set.BindComId] != null) {
        this.compId = this.source[set.BindComId]
      } else {
        this.compId = this.comId
      }
      const that = this
      this.$watch(
        () => {
          return this.source[set.BindComId]
        },
        (newVal, oldVal) => {
          if (newVal !== oldVal && oldVal) {
            that.compId = newVal
          }
        },
        { immediate: false }
      )
    },
    getDefVal() {
      if (this.control.DefaultVal === '[curTime]') {
        return new Date()
      } else if (this.control.DefaultVal === '[empId]') {
        return this.user.empId
      } else if (this.control.DefaultVal === '[company]') {
        return this.comName
      } else if (this.control.DefaultVal === '[companyId]') {
        return this.user.companyId
      } else if (this.control.DefaultVal === '[unitDept]') {
        return this.user.unitDept
      } else if (this.control.DefaultVal === '[unitId]') {
        return this.user.unitId
      } else if (this.control.DefaultVal === '[deptId]') {
        return this.user.deptId
      } else if (this.control.DefaultVal === '[unit]') {
        const index = this.user.unitDept.indexOf('-')
        return this.user.unitDept.substring(0, index)
      } else if (this.control.DefaultVal === '[dept]') {
        const index = this.user.unitDept.indexOf('-')
        return this.user.unitDept.substring(index + 1)
      } else if (this.control.DefaultVal === '[post]') {
        return this.user.post
      } else if (this.control.DefaultVal === '[empName]') {
        return this.user.name
      } else if (this.control.DefaultVal === '[comId]') {
        return this.comId
      } else if (this.control.ColType === ControlType.dept.value && this.control.DefaultVal != null) {
        const t = this.control.DefaultVal.split('-')
        this.compId = t[0]
        return t[1]
      } else if (this.control.ColType === ControlType.checkbox.value && this.control.DefaultVal != null) {
        return this.control.DefaultVal.split('-')
      } else if (this.control.ColType === ControlType.number.value) {
        if (this.control.DefaultVal != null && this.control.DefaultVal !== '') {
          return this.control.DefaultVal
        } else if (this.control.ControlSet.min != null) {
          return this.control.ControlSet.min
        }
      } else if (this.control.ColType === ControlType.switch.value) {
        if (this.control.DefaultVal != null && this.control.DefaultVal !== '') {
          return this.control.DefaultVal === 'true'
        } else {
          return false
        }
      }
      return this.control.DefaultVal
    }
  }
}
</script>
